<template>
  <div class="entityConter">
    <div class="entityConter-top">
      <div class="entityConter-mul">
        <el-menu class="el-menu-demo" default-active="1" mode="horizontal" @select="handleSelect">
          <el-submenu index="1">
            <template slot="title">{{ titleValue }}</template>
            <el-menu-item index="/web/code">界面生成</el-menu-item>
            <el-menu-item index="/web/entity">实体生成</el-menu-item>
            <el-menu-item index="/web/reward">分润维度</el-menu-item>
          </el-submenu>
        </el-menu>
        <div>
          <el-button type="danger" size="medium" @click="save">保存</el-button>
          <el-button type="primary" size="medium" @click="sumbit">生成实体</el-button>
        </div>
      </div>
    </div>
    <div class="entityConter-bottom">
      <div class="entityConter-left">
        <div class="entityConter-hp1_ot1" style="border-top: none;">
          <div class="entityConter-hp1_oitle">项目实体</div>
          <div class="entityConter-hp1_obut" @click="addChange(1)">添加</div>
        </div>
        <div class="entityConter-hp2">
          <div class="entityConter-left_li" @click="editChange(gItem)" v-for="(gItem, gIndex) in projectEntity"
            :key="gIndex">
            <div class="entityConter-left_lable">{{ gItem.name }}</div>
            <div class="entityConter-left_lable">{{ gItem.createTime }}</div>
          </div>
        </div>
        <div class="entityConter-hp1_ot1">
          <div class="entityConter-hp1_oitle">项目设置</div>
          <div class="entityConter-hp1_obut" @click="addChange(3)">添加</div>
        </div>
        <div class="entityConter-hp2">

        </div>
        <div class="entityConter-hp1_ot1">
          <div class="entityConter-hp1_oitle">项目枚举</div>
          <div class="entityConter-hp1_obut" @click="addChange(4)">添加</div>
        </div>
        <div class="entityConter-hp2">

        </div>
        <div class="entityConter-hp1_ot1">
          <div class="entityConter-hp1_oitle">其它</div>
          <div class="entityConter-hp1_obut" @click="addChange(5)">添加</div>
        </div>
        <div class="entityConter-hp2">

        </div>
      </div>
      <div class="entityConter-right">
        <div class="entityConter-xul">
          <div class="entityConter-xli">
            <div class="entityConter-xtitle"><span class="entityConter-required">*</span>选择项目：</div>
            <div class="entityConter-xflex">
              <el-select v-model="viewModel.project" filterable placeholder="请选择" size="medium">
                <el-option v-for="item in selectProject" :key="item.key" :label="item.key" :value="item.key"></el-option>
              </el-select>
            </div>
          </div>
          <div class="entityConter-xli">
            <div class="entityConter-xtitle"><span class="entityConter-required">*</span>业务领域：</div>
            <div class="entityConter-xflex">
              <el-input v-model="viewModel.domain" placeholder="请输入内容" size="medium"></el-input>
            </div>
          </div>
          <div class="entityConter-xli">
            <div class="entityConter-xtitle"><span class="entityConter-required">*</span>实体名称：</div>
            <div class="entityConter-xflex">
              <el-input v-model="viewModel.name" placeholder="请输入内容" size="medium"></el-input>
            </div>
          </div>
          <div class="entityConter-xli">
            <div class="entityConter-xtitle"><span class="entityConter-required">*</span>实体标识：</div>
            <div class="entityConter-xflex">
              <el-input v-model="viewModel.key" placeholder="请输入内容" size="medium"></el-input>
            </div>
          </div>
        </div>
        <div class="entityConter-radioul">
          <div class="entityConter-radioul_ralable"><span class="entityConter-required">*</span>结构类型：</div>
          <div class="entityConter-radioul_rarig">
            <el-radio-group v-model="viewModel.dataDesignType">
              <el-radio :label="rItem.key" v-for="(rItem, rIndex) in structureType" :key="rIndex">{{ rItem.value
              }}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="entityConter-rtable">
          <div class="entityConter-tabbut"><el-button type="primary" @click="addTablechange">新增字段</el-button></div>
          <el-table :data="viewModel.cloumns" style="width: 100%">
            <el-table-column label="英文标识">
              <template slot-scope="scope">
                <el-input v-model="scope.row.key" placeholder="请输入" size="small"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="中文名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" placeholder="请输入" size="small"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="数据类型">
              <template slot-scope="scope">
                <el-select v-model="scope.row.dataType" filterable placeholder="请选择" size="small">
                  <el-option v-for="citem in dataType" :key="citem.key" :label="citem.value"
                    :value="citem.key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="控件类型">
              <template slot-scope="scope">
                <el-select v-model="scope.row.controlType" filterable placeholder="请选择" size="small">
                  <el-option v-for="kitem in controlType" :key="kitem.key" :label="kitem.value"
                    :value="kitem.key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="是否必填">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isRequired"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="是否编辑">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isEdit"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="是否列表">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isList"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="宽度">
              <template slot-scope="scope">
                <el-input v-model="scope.row.width" placeholder="请输入" size="small"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="数据源">
              <template slot-scope="scope">
                <el-select v-model="scope.row.dataSource" filterable placeholder="请选择" size="small">
                  <el-option v-for="witem in dataOrigin" :key="witem.key" :label="witem.value"
                    :value="witem.key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="帮助文字">
              <template slot-scope="scope">
                <el-input v-model="scope.row.helpBlock" placeholder="请输入" size="small"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="entityConter-link">
        <div class="entityConter-link_fh1" style="border-top: none;">常用字段</div>
        <div class="entityConter-link_gul">
          <div class="entityConter-link_gli" v-for="(gItem, gIndex) in commonField" :key="gIndex">
            <span class="entityConter-link_xdt1">{{ gItem.name }}（{{ gItem.key }}）</span>
          </div>
        </div>
        <div class="entityConter-link_fh1">常用设计</div>
        <div class="entityConter-link_mark">
          <div class="entityConter-link_mali" @click="commonDesignTab(mItem)" v-for="(mItem, mIndex) in commonDesign"
            :key="mIndex">{{ mItem.key }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      titleValue: '界面生成',
      viewModel: {
        dataDesignType: 1,
        cloumns: []
      },
      projectEntity: [], //项目实体
      commonField: [], //常用字段
      commonDesign: [], //常用设计
      selectProject: [], //选择项目
      structureType: [], //结构类型
      controlType: [], //控件类型
      dataType: [], //数据类型
      dataOrigin: [] //数据源
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      var pathValue = this.$route.path
      if (pathValue === '/web/code') {
        this.titleValue = '界面生成'
      } else if (pathValue === '/web/entity') {
        this.titleValue = '实体生成'
      } else {
        this.titleValue = '分润维度'
      }
      this.projectEntity = await this.$ala.httpGet('api/DataDesign/List')
      this.commonField = await this.$ala.httpGet('api/DataDesign/Fileds')
      this.commonDesign = await this.$ala.httpGet('api/DataDesign/Design')
      this.selectProject = await this.$ala.httpGet('api/DataDesign/Porject')
      this.structureType = await this.$ala.httpGet('api/type/GetKeyValue?type=DataDesignType')
      this.controlType = await this.$ala.httpGet('api/type/GetKeyValue?type=ColumStyle')
      this.dataType = await this.$ala.httpGet('api/DataDesign/DataType')
      this.dataOrigin = await this.$ala.httpGet('api/DataDesign/DataList')
      this.addTablechange()
    },
    async editChange (eData) { //点击列表编辑
      var repoens = await this.$ala.httpGet('api/DataDesign/View', {
        id: eData.id
      })
      if (repoens) {
        this.viewModel = repoens
      }
    },
    addChange (vData) { //添加
      this.viewModel.dataDesignType = vData
    },
    handleSelect (e) { //页面切换
      this.$router.push(e)
    },
    addTablechange () {
      var objectModel = {
        controlType: '',
        dataSource: '',
        dataType: '',
        helpBlock: '',
        isEdit: true,
        isList: true,
        isRequired: true,
        key: '',
        name: '',
        width: 180
      }
      this.viewModel.cloumns.push(objectModel)
    },
    commonDesignTab (data) {
      this.viewModel.cloumns = data.value
    },
    async sumbit () { //生成实体
      var response = await this.$ala.httpGet('api/DataDesign/Create')
      if (response) {
        this.$notify({
          title: '成功',
          message: '代码生成成功',
          type: 'success',
          position: 'bottom-right'
        })
      }
    },
    async save () { //生成实体
      var response = await this.$ala.httpPost('api/DataDesign/Save', this.viewModel)
      if (response) {
        this.$notify({
          title: '成功',
          message: '实体保存成功',
          type: 'success',
          position: 'bottom-right'
        })
      }
    }
  }
}
</script>
<style lang="scss">
.entityConter {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .el-tabs__item {
    padding: 0 10px;
  }

  .entityConter-top {
    .entityConter-mul {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px 0 0;
      border-bottom: 1px solid #e5e5e5;

      .entityConter-mt1 {
        font-size: 15px;
        margin-left: 10px;
      }

      .entityConter-mt2 {
        flex: 1;
        min-width: 0;
      }
    }
  }

  .entityConter-bottom {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    padding: 10px;

    .entityConter-left {
      width: 380px;
      border: 1px solid #e5e5e5;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;

      .entityConter-hp1 {
        padding: 10px 15px;
        height: 200px;
        overflow: auto;

        .entityConter-hp1_ot2 {
          font-size: 13px;
          color: #999;
          line-height: 2;
        }
      }

      .entityConter-hp1_ot1 {
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        padding: 8px 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .entityConter-hp1_oitle {
          font-size: 15px;
          color: #333333;
        }

        .entityConter-hp1_obut {
          font-size: 12px;
          color: #fff;
          background-color: #34bfa3;
          border-radius: 4px;
          padding: 6px 12px;
          cursor: pointer;

          &:hover {
            opacity: 0.6;
          }
        }
      }

      .entityConter-hp2 {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-left: 10px;
      }

      .entityConter-left_li {
        padding: 10px 15px 10px 0;
        cursor: pointer;
        box-sizing: border-box;

        .entityConter-left_lable {
          width: 360px;
          text-align: left;
          font-size: 14px;
          color: rgba(#000000, 0.7);
          margin-right: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .entityConter-left_lable+.entityConter-left_lable {
          margin-top: 8px;
        }

        .entityConter-left_required {
          color: red;
          font-size: 20px;
          vertical-align: middle;
        }

        .entityConter-left_file {
          flex: 1;
          min-width: 0;
        }

        .entityConter-left_ftop {
          display: flex;
          flex-direction: row;
          align-items: center;
        }

        .entityConter-left_komt0 {
          flex: 1;
          min-width: 0;
        }

        .entityConter-left_ftop+.entityConter-left_ftop {
          margin-top: 10px;
        }

        .entityConter-left_add {
          width: 30px;
          height: 30px;
          line-height: 25px;
          border-radius: 30px;
          border: 1px solid #e5e5e5;
          font-size: 30px;
          color: rgba(#333, 0.5);
          text-align: center;
          margin-left: 10px;
        }

        &:hover {
          background-color: rgba(#e5e5e5, 0.2);
        }
      }

      .entityConter-left_li+.entityConter-left_li {
        border-top: 1px solid rgba(#e5e5e5, 0.6);
      }
    }

    .entityConter-right {
      flex: 1;
      min-width: 0;
      border: 1px solid #e5e5e5;
      margin: 0 10px;
      padding: 10px 20px;
      overflow: auto;

      .entityConter-xul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .entityConter-xli {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-right: 25px;
          margin-bottom: 15px;
          width: 270px;

          .entityConter-xtitle {
            font-size: 14px;
            margin-right: 10px;
          }

          .entityConter-xflex {
            flex: 1;
            min-width: 0;
          }
        }

        .entityConter-xli:nth-child(1) {
          margin-left: 0;
        }
      }

      .entityConter-required {
        font-size: 15px;
        color: red;
      }

      .entityConter-radioul {
        display: flex;
        flex-direction: row;

        .entityConter-radioul_ralable {
          font-size: 14px;
        }

        .entityConter-radioul_rarig {
          flex: 1;
          min-width: 0;

          .el-radio {
            margin-bottom: 10px;
          }
        }
      }

      .entityConter-rtable {
        margin-top: 20px;

        .entityConter-tabbut {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
        }
      }
    }

    .entityConter-link {
      width: 240px;
      border: 1px solid #e5e5e5;
      display: flex;
      flex-direction: column;

      .entityConter-link_h1 {
        font-size: 15px;
        text-align: center;
        font-weight: bold;
        padding: 12px 10px;
        border-bottom: 1px solid #e5e5e5;
      }

      .entityConter-link_gul {
        flex: 1;
        min-height: 0;
        overflow: auto;

        .entityConter-link_gli {
          padding: 12px 15px;
          cursor: pointer;
          display: flex;
          flex-direction: row;
          align-items: center;

          .entityConter-link_xdt1 {
            font-size: 14px;
            color: rgba(#000000, 0.6);
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .entityConter-link_xdt2 {
            display: none;
            font-size: 13px;
            color: #716aca;
          }

          &:hover {
            background-color: rgba(#e5e5e5, 0.2);

            .entityConter-link_xdt2 {
              display: block;
            }
          }
        }

        .entityConter-link_gli+.entityConter-link_gli {
          border-top: 1px solid rgba(#e5e5e5, 0.3);
        }
      }

      .entityConter-link_fh1 {
        font-size: 15px;
        color: #333;
        font-size: 15px;
        color: #333333;
        line-height: 3;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        padding: 0 15px;
      }

      .entityConter-link_mark {
        height: 200px;
        overflow: auto;

        .entityConter-link_mali {
          font-size: 13px;
          font-size: 14px;
          color: rgba(#000000, 0.6);
          padding: 12px 15px;
          line-height: 2;
          cursor: pointer;
        }

        .entityConter-link_mali+.entityConter-link_mali {
          border-top: 1px solid rgba(#e5e5e5, 0.3);
        }
      }
    }
  }
}
</style>